EduChannel Indonesia Blog WeBooks LMS Pembelajaran Video
  • Pencarian
Versi

  • Informasi Buku
  • Pengantar HTML
    • HTML Pengantar
    • HTML Elemen
    • HTML Atribut
    • HTML Heading
    • HTML Style
    • HTML Formating
    • HTML Kutipan
    • HTML Komentar
    • HTML CSS
    • HTML Tautan
    • HTML Gambar
    • HTML Tabel
    • HTML List
    • HTML Block dan Inline
    • HTML Class
    • HTML Id
    • HTML Iframe
    • HTML Head
    • HTML Kode
    • HTML Semantic
  • Form HTML
    • HTML Form
    • HTML Form Elemen
  • HTML Media
    • HTML Video
    • HTML Audio
    • HTML Object
    • HTML Embed

Menampilkan Gambar HTML

Tutorial HTML; Diperbarui tanggal: 9/09/2025

Untuk menampilkan gambar dengan HTML kita dapat menggunakan tag <img> dan atribut src contoh penggunaanya adalah sebagai berikut:

<img src="peta_indonesia.jpg" alt="Peta Indonesia">

Atribut src berisi lokasi gambar yang akan ditampilkan sedangkan nilai pada atribut alt akan ditampilkan sebelum atau ketika gambar gagal dimuat. 

Mengubah Ukuran Gambar

Untuk mengubah ukuran gambar kita dapat menggunakan atribut width untuk lebar dan height untuk tinggi. Contoh penggunaannya yaitu:

<img src="peta_indonesia.jpg" alt="Peta Indonesia" width='100' height='200'>

Kode diatas akan menampilkan gambar dengan ukurang lebar 100 pixel dan tinggi 200 pixel. 

Selain melalui cara di atas, kita juga dapat mengatur lebar dan tinggi gambar dengan CSS dengan menambahkan atribut style. Contoh:

<img src="peta_indonesia.jpg" alt="Peta Indonesia" style="width:'100px'; height:'200px'">

Tata Letak Gambar

Untuk mangatur tata letak gambar apakah disamping kiri atau kanan teks kita dapat menggunakan property CSS float pada gambar. Contoh:

<img src="peta_indonesia.jpg" alt="Peta Indonesia" style="width:'100px'; height:'200px'; float:left">

Kode diatas akan menempatkan gambar disebelah kiri dari teks.

 

 

Copyright ©2022 #EduChannel Indonesia.
Bali - Indonesia